<template>
    <view class="curve">
        <view v-if="!historylist" class="page_dcenter_null">
            <img class="page_dcenter_null_img" src="../../../static/img_null_bookbuilding.png" />
            <view>暂无记录</view>
        </view>
        <scroll-view v-else scroll-y class="pagses">
            <view class="uni-list">
                <view class="uni-list-cell">
                    <view class="uni-list-cell-db">
                        <picker @change="bindPickerChange" :value="index" :range="array">
                            <view class="uni-input">{{array[index]}}</view>
                        </picker>
                    </view>
                </view>
            </view>
            <view class="fm_top">
                <!-- <div class="bgred"></div>
                <div class="bgred1"></div> -->
                <div>
                    <canvas
                        canvas-id="canvasLineA"
                        id="canvasLineA"
                        class="charts"
                        @touchstart="touchLineA"
                        @touchmove="moveLineA"
                        @touchend="touchEndLineA"
                    />
                </div>
            </view>
        </scroll-view>
    </view>
</template>
<script>
import uCharts from "../../components/u-charts/u-charts.js";
var lastMoveTime = null; //最后执行移动的时间戳
var that;
export default {
    data() {
        return {
            historylist: null,
            itemsList: [],
            canvasLineA: null,
            index: 1,
            array: ["今天", "最近7天", "最近30天"],
            qudata: {
                monitorTypeId: "316189802716475392",
                fromType: 7,
            },
            style: "",
            pro: {
                time: [],
                index1: [],
                index2: [],
                index3: [],
            },
            pixelRatio: 1,
        };
    },
    mounted() {
        that = this;
        var _this = this;
        _this.cWidth = uni.upx2px(750);
        _this.cHeight = uni.upx2px(900);
        _this.getList();
    },
    methods: {
        touchLineA(e) {
            lastMoveTime = Date.now();
        },
        moveLineA(e) {
            var _this = this;
            let currMoveTime = Date.now();
            let duration = currMoveTime - lastMoveTime;
            if (duration < Math.floor(1000 / 60)) return; //每秒60帧
            _this.canvaLineA.showToolTip(e, {
                format: function (item, category) {
                    return category + " " + item.name + ":" + item.data;
                },
            });
        },
        touchEndLineA(e) {
            var _this = this;
            _this.canvaLineA.touchLegend(e);
            _this.canvaLineA.showToolTip(e, {
                format: function (item, category) {
                    return category + " " + item.name + ":" + item.data;
                },
            });
        },
        goactive(itm) {},
        bindPickerChange(e) {
            var time = e.target.value;
            if (time == 0) {
                this.qudata.fromType = 1;
            } else if (time == 1) {
                this.qudata.fromType = 7;
            } else if (time == 2) {
                this.qudata.fromType = 30;
            }
            this.index = e.target.value;
            this.getList();
        },
        isgetprs(data) {
            var pro = {
                time: [],
                index1: [],
                index2: [],
                index3: [],
            };
            if (
                data.beforeMealOrHighPressure &&
                data.beforeMealOrHighPressure.length > 0
            ) {
                for (var i = 0; i < data.beforeMealOrHighPressure.length; i++) {
                    var str=data.beforeMealOrHighPressure[i].monitorTime.substring(0,5)
                    var fas =  str.replace(/月/, "-")
                    pro.time.push(fas);
                    pro.index1.push(data.beforeMealOrHighPressure[i].values);
                    pro.index2.push(data.afterMealOrLowPressure[i].values);
                    pro.index3.push(data.beforeDawnOrPulseRate[i].values);
                }
            }
            return pro;
        },

        showLineA() {
            var _this = this;
            var frodata = [
                {
                    value: _this.historylist.highMinValue,
                    lineColor: "#FFA5CA",
                },
                {
                    value: _this.historylist.highMaxValue,
                    lineColor: "#FFA5CA",
                },
                {
                    value: _this.historylist.lowMinValue,
                    lineColor: "#b5b5b5",
                },
                {
                    value: _this.historylist.lowMaxValue,
                    lineColor: "#b5b5b5",
                },

            ];
            // _this.style=''
            // for (
            //     var i = _this.historylist.highMinValue;
            //     i < _this.historylist.highMaxValue;
            //     i++
            // ) {
            //     var itm = {
            //         value: i,
            //         lineColor: "#ffe8f5",
            //     };
            //     frodata.push(itm);
            // }
            // for (
            //     var i = _this.historylist.lowMinValue;
            //     i < _this.historylist.lowMaxValue;
            //     i++
            // ) {
            //     var itm = {
            //         value: i,
            //         lineColor: "#f2f2f2",
            //     };
            //     frodata.push(itm);
            // }

            _this.canvaLineA = new uCharts({
                $this: that,
                canvasId: "canvasLineA",
                type: "line",
                fontSize: 11,
                legend: { show: true },
                dataLabel: true,
                rotate: false, //横屏
                dataPointShape: true,
                dataPointShapeType: "solid",
                background: "#FFFFFF",
                pixelRatio: _this.pixelRatio,
                categories: _this.pro.time.reverse(),
                series: [
                    {
                        type: "line",
                        name: "收缩压",
                        color: "#FA4D93",
                        data: this.pro.index1.reverse(),
                    },
                    {
                        type: "line",
                        name: "舒张压",
                        color: "#FFD97C",
                        data: this.pro.index2.reverse(),
                    },
                    {
                        type: "line",
                        name: "脉率",
                        color: "#B0F890",
                        data: this.pro.index3.reverse(),
                    },
                ],
                // animation: true,
                // enableScroll: true, //开启图表拖拽功能
                xAxis: {
                    disableGrid: true,
                    type: "grid",
                    gridType: "solid",
                    gridColor: "#979797",
                    itemCount: 30,
                    labelCount: 2,
                    format: (val) => {
                        return val;
                    },
                },
                yAxis: {
                    gridType: "dash",
                    gridColor: "#979797",
                    splitNumber: 10,
                    dashLength: 8,
                    data: [
                        {
                            axisLineColor: "#979797",
                            gridType: "solid",
                            gridColor: "#979797",
                            min: 50,
                            max: 150,
                        },
                    ],
                },
                width: _this.cWidth * _this.pixelRatio,
                height: _this.cHeight * _this.pixelRatio,
                enableMarkLine: true,
                extra: {
                    // line: {
                    //     width: "2px",
                    //     style: "straight",
                    // },
                    markLine: {
                        type: "solid",
                        data: frodata,
                    },
                    tooltip: {
                        showBox: true, //是否显示半透明黑色的提示区域
                        bgColor: "#ffffff", //主体背景颜色
                        bgOpacity: 1, //背景颜色透明度
                        gridType: "solid", //辅助线类型（虚线）
                        dashLength: 5, //虚线单段长度
                        gridColor: "#FFE0EC", //辅助线颜色
                        fontColor: "#333333", //主体文字颜色
                        labelBgColor: "#DFE8FF", //标签背景颜色
                        labelBgOpacity: 0.95, //背景颜色透明度
                        labelFontColor: "#666666", //标签文字颜色
                    },
                },
            });
        },
        getList() {
            var _this = this;
            _this.$ajaxs
                .get("/mobile/v1/monitor/getCurveForm", _this.qudata)
                .then((res) => {
                    if (res.status == 200) {
                        _this.historylist = res.content;
                        _this.pro = _this.isgetprs(_this.historylist);
                        _this.showLineA();
                    } else {
                        uni.showToast({
                            title: "请检查网络~",
                            icon: "none",
                        });
                    }
                })
                .catch((err) => reject(err));
        },
        tips() {
            uni.showModal({
                title: "温馨提示提示",
                cancelText: "关闭",
                confirmText: "我知道了",
                confirmColor: "#FA4D93",
                content:
                    "血压异常时，请关注测量前3小时的用药及生活方式记录，找到原因，以后注意。",
                success(res) {
                    if (res.confirm) {
                    } else if (res.cancel) {
                    }
                },
            });
        },
    },
};
</script>

<style scoped lang="scss">
.curve {
    height: calc(100% - 88upx);
    .page_dcenter_null {
        padding-top: 180upx;
        text-align: center;
        .page_dcenter_null_img {
            height: 180upx;
            width: 162upx;
        }
        // div {
        //     color: #999;
        //     font-size: 28upx;
        //     height: 40upx;
        //     line-height: 40upx;
        // }
    }
    .pagses {
        height: 100%;
        .uni-input {
            margin-top: 20upx;
            background: #fff;
            text-align: right;
            position: relative;
            font-size: 24upx;
            height: 100upx;
            line-height: 100upx;
            padding-right: 40upx;
        }
        .uni-input::after {
            content: "";
            position: absolute;
            top: 46upx;
            right: 15upx;
            width: 0;
            height: 0;
            border-right: 10upx solid transparent;
            border-left: 10upx solid transparent;
            border-top: 10upx solid #333;
        }
        .fm_top {
            height: 100%;
            background: #fff;
            position: relative;
            .bgred {
                position: absolute;
                width: 100%;
                top: 104upx;
                height: 430upx;
                background: rgba(250, 77, 177, 0.17);
            }
            .bgred1 {
                position: absolute;
                width: 100%;
                top: 534upx;
                height: 260upx;
                background: #f2f2f2;
            }
            .charts {
                width: 100%;
                height: 900upx;
            }
        }
    }
}
</style>